<template>
	<div ref="content" id="box">
		<!-- 这里是要抓取内容的div -->
		<div class="type" v-if="mytype==1">
			<img src="../../assets/imgs/f1.jpg" alt="" class="left">
			<div class="right">
				<h1 class="t1">{{ title }}</h1>
				<p class="t2">{{ subtitle }}</p>
			</div>
		</div>
		<div class="type" v-else>
			<img src="@/assets/imgs/l1.jpg" alt="" class="all">
		</div>
	</div>
	<van-field v-model="title" placeholder="输入标题" />
	<van-field v-model="subtitle" placeholder="输入副标题" />
	<van-radio-group v-model="mytype" @change="check">
		<van-radio name="1">单选框 1</van-radio>
		<van-radio name="0">单选框 2</van-radio>
	</van-radio-group>
	<van-button type="info" @click="captureContent">信息按钮</van-button>
	<div>
		<van-uploader :after-read="onRead">
			<van-icon name="photograph" />
		</van-uploader>
	</div>
	
</template>

<script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import { canvasToBlob } from 'canvas-to-blob';
const mytype = ref(1)
console.log(`output->type.value`,mytype.value)
const title = ref('李二狗出品');
const subtitle = ref('13988888888');
const content = ref(null);
const check = () => {
	
	console.log(`output->type.value`,mytype.value)
}
const captureContent = () => {
	const options = {
		width: 400, // 自定义宽度
		height: 200, // 自定义高度
	};

	html2canvas(content.value, options).then(canvas => {
		const rotatedCanvas = document.createElement('canvas');
		const rotatedContext = rotatedCanvas.getContext('2d');
		rotatedCanvas.width = canvas.height;
		rotatedCanvas.height = canvas.width;
		rotatedContext.translate(canvas.height, 0);
		rotatedContext.rotate(Math.PI / 2);
		rotatedContext.drawImage(canvas, 0, 0);

		const imgData = rotatedCanvas.toDataURL('image/png');
		const img = new Image();
		img.src = imgData;

		// 可以将生成的旋转后的图片插入到页面中或进行其他操作
		document.body.appendChild(img);
	});
};
const onRead=(file)=> {
      console.log(file)
    }
</script>
<style lang="scss" scoped>
#box{
	width: 296px;
	height: 128px;
}
.type {
	width: 296px;
	height: 128px;
	display: flex;
	border: 1px solid #3333;
	align-items: center;
	.all{
		width: 296px;
		height: 128px;
	}
	.left {
		width: 100px;
		height: 100px;
	}
	.right{
		margin-left: 20px;
		.t1{
			font-size: 30px;
			font-weight: bold;
		}
		.t2{
			font-size: 20px;
			font-weight: bold;
			color: #666666;
			margin-top:20px;
		}
	}
}
</style>